
import type { RentTooth } from '#ui-colors/components';
<script setup>
const props = defineProps({
	scheme: Object,
})
const emit = defineEmits(["tooth"]);
function emitTooth(item) {
	if (item === undefined) {
		return;
	}
	if (item.length === 0) {
		return;
	}
	emit('tooth', item)

}
</script>
<template>
	<div class="grid grid-cols-3 text-center max-w-4xl">
		<div class="flex flex-row items-center">
			<div class="basic-1/2">
				<RentTooth :ntooth="4" :itooth="scheme['4']" @tooth="emitTooth" />
			</div>
			<div class="basic-1/2">
				<RentTooth :ntooth="5" :itooth="scheme['5']" @tooth="emitTooth" />
			</div>
		</div>
		<div class="flex flex-col">
			<div class="flex flex-row justify-center text-center">
				<div class="basic-1/2">
					<RentTooth :ntooth="1" :itooth="scheme['1']" @tooth="emitTooth" />
				</div>
				<div class="basic-1/2">
					<RentTooth :ntooth="2" :itooth="scheme['2']" @tooth="emitTooth" />
				</div>
			</div>
			<div class="flex flex-row justify-center">
				<div>
					<RentTooth :ntooth="3" :itooth="scheme['3']" @tooth="emitTooth" />
				</div>
			</div>
		</div>
		<div class="flex flex-row items-center">
			<div class="basis-1/2">
				<RentTooth :ntooth="6" :itooth="scheme['6']" @tooth="emitTooth" />
			</div>
			<div class="basis-1/2">
				<RentTooth :ntooth="7" :itooth="scheme['7']" @tooth="emitTooth" />
			</div>
		</div>
	</div>
</template>
